<template>
    <div>
        <div class="float_left tree_box" style="width:200px;">
            <h4 class="margin_bottom20" style="float:left">模块</h4>
            <auth perms="moudle_page1:yuansuan1" style="margin-left:100px;">
                <el-button type="primary" style="margin-left:0px;" size="small" @click="openDataAuth">通用数据权限设置</el-button>
            </auth>
            <div style="clear:both"></div>
            <el-tree
                    :data="treeJson"
                    node-key="id"
                    :props="defaultProps"
                    :load="loadNode"
                    @current-change="currentChange"
                    highlight-current
                    lazy
                    >
            </el-tree>
        </div>
        <div class="operate_main" style="margin-left: 240px;">
            <h4 class="margin_bottom20">操作授权</h4>
            <template>
                <el-table
                        :data="roleList"
                        border
                        style="width: 100%; text-align: center">
                    <el-table-column
                            prop="roleName"
                            label=" "
                            width="180">
                    </el-table-column>
                    <el-table-column v-for="element in elementList" :key="element.elementInnerName" :label="element.caption" header-align="center">
                        <template slot-scope="scope" >
                            <input class="regular-checkbox" type="checkbox" :value="roleList[scope.$index].id + element.elementInnerName" v-model="auth" :id='roleList[scope.$index].id + element.elementInnerName'>
                                <label :for='roleList[scope.$index].id + element.elementInnerName' @click="setPermission(roleList[scope.$index].id, element.elementInnerName, element.pageId, element.pageInnerName)"></label>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!-- 表单弹窗 -->
        <el-dialog title="通用数据权限管理" v-model="dialogFormVisible">
            <el-table :data="roleListForData" border style="width: 100%; text-align: center">
                    <el-table-column prop="roleName" label=" " width="180"></el-table-column>
                    <el-table-column v-for="element in dataOptions" :key="element.innerName" :label="element.itemName" header-align="center">
                        <template slot-scope="scope" >
                            <input class="regular-checkbox" :name="roleListForData[scope.$index].id" type="radio" v-model="authData[roleListForData[scope.$index].id]"
                             :value="roleListForData[scope.$index].id+element.innerName"
                                 :id="roleListForData[scope.$index].id+element.innerName">
                                <label :for="roleListForData[scope.$index].id+element.innerName" @click="setDataPermission(roleListForData[scope.$index].id, element.innerName)"></label>
                        </template>
                    </el-table-column>
            </el-table>
        </el-dialog>

        <div class="clear"></div>
    </div>
</template>
<script>
    import Auth from '../../components/auth.vue' 
    export default {
        name:'app',
        components: {
            'auth': Auth
        },
        data() {
            return {
                treeJson: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                roleList: [],
                elementList: [],
                authorizationList: [],
                auth: [],
                dialogFormVisible: false,
                roleListForData: [],
                dataOptions: [],
                authorizationListForData: [],
                authData: {}
            }
        },
    methods: {
        loadNode(node, resolve) {
            // console.log(node);
            var id = "";
            if(node.data.id != null) {
                id = node.data.id
            }
            this.$http.get(API.rootPath + "/auth-moudles-pages/" + id).then((response) => {
                if(response.body.status == 0) {
                    resolve(response.body.data);
                }
            }, (response) => {
                // error callback
            });
        },

        currentChange(data, node) {
            // console.log(node);
            if(node.level == 2) {
                // console.log("查看右边的");
                this.$http.get(API.rootPath + "/authorizations/pages/" + data.id, {params: {deptId:localStorage.deptId}}).then((response) => {
                    if(response.body.status == 0) {
                        this.roleList = response.body.data.roleList;
                        this.elementList = response.body.data.elementList;
                        this.authorizationList = response.body.data.authorizationList;

                        this.authorizationList.forEach(function(item) {
                            // console.log(item);
                            this.auth.push(item.authId + item.elementInnerName);
                        }, this);

                        // console.log("auth", this.auth);
                    }
                }, (response) => {
                    // error callback
                });
            }
        },

        setPermission(roleId, elementInnerName, pageId, pageInnerName) {
            console.log(roleId, elementInnerName);
            this.$http.put(API.rootPath + "/authorizations", {authId: roleId, elementInnerName: elementInnerName, pageId:pageId, pageInnerName:pageInnerName}, {emulateJSON: true} ).then((response) => {
                if(response.body.status == 0) {
                    this.$message({
                        message: '保存成功',
                        type: 'success',
                        customClass: 'messageDIY'
                    });
                }
            }, (response) => {
                // error callback
            }); 
        },
        openDataAuth() {
            this.$http.get(API.rootPath + "/authorizations/data", {params: {userId: localStorage.userId, deptId:localStorage.deptId}}).then((response) => {
                    if(response.body.status == 0) {
                        this.dialogFormVisible = true;
                        this.roleListForData = response.body.data.roleList;
                        this.dataOptions = response.body.data.dataOptionsList;
                        this.authorizationListForData = response.body.data.authorizationList;

                        this.authorizationListForData.forEach(function(item) {
                            // console.log(item);
                            // this.authData.push(item.authId + item.elementInnerName);
                            var key = item.authId;
                            console.log(key);
                            this.authData[key] = item.authId + item.elementInnerName;
                            // console.log(item);
                        }, this);
                        console.log(this.authData);
                    }
                }, (response) => {
                    // error callback
            });
        },
        setDataPermission(roleId, innerName) {
            console.log(roleId, innerName);
            this.$http.put(API.rootPath + "/authorizationData", {authId: roleId, elementInnerName: innerName}, {emulateJSON: true} ).then((response) => {
                if(response.body.status == 0) {
                    this.$message({
                        message: '保存成功',
                        type: 'success',
                        customClass: 'messageDIY'
                    });
                }
            }, (response) => {
                // error callback
            }); 
        }
    },
    created() {
        // this.$http.get(API.rootPath + "/auth-moudles-pages").then((response) => {
        //     if(response.body.status == 0) {
        //         this.treeJson =response.body.data;
        //     }
        // }, (response) => {
        //     // error callback
        // }); 
    }
};
</script>

